<template>
  <div>
    <div class="cost-title">补充费用 <span>(单位：元)</span></div>
    <el-table border
              :span-method="arraySpanMethod"
              :data="tableData">
      <template v-for="(column, index) in tableColumn">
        <el-table-column :key="index"
                         :show-overflow-tooltip="true"
                         v-bind="column">
          <template slot-scope="scope">
            <div v-if="column.name === 'type' && !disabled">
              <add-cost v-if="!scope.row.typeDisabled"
                        v-model="scope.row[column.name]"
                        :value-arr.sync="feeTypes"
                        :options="options"
                        :disabled="addActionDisabled"
                        @input="handleSelect(scope.$index, scope.row, 'type')" />
              <span v-else
                    :class="[scope.row.title ? 'c-primary' : '']">
                {{ scope.row.typeName }}
              </span>
            </div>
            <!-- oninput="this.value=(this.value.match(/^[-]{0,1}\d{0,7}(\.\d{0,2})?/)||[''])[0];" -->
            <div v-else-if="column.name === 'money' && column.type != 'total' && !disabled">
              <!-- 议价 上一次费用显示 -->
              <div v-if="waybillQuoteBargain && (scope.row[`${column.name}Before`] || scope.row[`${column.name}Before`] === 0)"
                   class="c-red">
                {{ scope.row[`${column.name}Before`] != scope.row[column.name]
                   ? scope.row[`${column.name}Before`]
                   : null
                }}
              </div>
              <el-input v-if="!scope.row.typeDisabled"
                        v-model.trim="scope.row[column.name]"
                        :class="scope.row[column.name] && Number.isNaN(Number(scope.row[column.name])) ? 'warn-style' : ''"
                        :disabled="!scope.row.type"
                        @input="handleInput(scope.row, column.name, 'input')" />
              <span v-else>{{ scope.row[column.name] }} </span>
            </div>
            <div v-else-if="column.name === 'remarks'">
              <div v-if="!scope.row.typeDisabled && !scope.row.barginDisabled && !disabled">
                <el-input v-model="scope.row[column.name]"
                          maxlength="200"
                          :disabled="!scope.row.type || addActionDisabled"
                          style="width: calc(100% - 40px)" />
                <span v-if="!addActionDisabled"
                      @click="removeFee(scope.$index, scope.row, 'type')">
                  <icon-svg class="icon-delete"
                            icon-name="shanchu2"></icon-svg>
                </span>
              </div>
              <span v-else>{{ scope.row[column.name] || '--' }} </span>
            </div>
            <div v-else-if="column.name == 'type'"
                 :class="[scope.row.title ? 'c-primary' : '']">
              {{ scope.row.title || scope.row.typeName }}
            </div>
            <div v-else
                 :class="[column.type === 'total' ? 'c-primary f14' : '']">
              {{ scope.row[column.name]
                ? (Number.isNaN(Number(scope.row[column.name])) ? 0 : thousandDigit(scope.row[column.name], 2))
                : (column.name === 'money' ? 0 : '--') }}
            </div>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <div v-if="!disabled && !addActionDisabled"
         class="add-cost">
      <span @click="addFee">
        <icon-svg class="c-primary"
                  icon-name="tianjiazhandian" />
        新增费用
      </span>
    </div>
  </div>
</template>

<script>
import AddCost from "@/components/advance/AddCost.vue";
import { returnThousandDigit } from "@/libs/util.js";
import { FEE_OPTIONS } from "../quotation.mixin";

export default {
  name: "Bargain",
  components: {
    AddCost
  },
  props: {
    dataList: {
      type: Array,
      default: () => []
    },
    disabled: {
      type: Boolean,
      default: false
    },
    status: {
      type: String,
      default: null
    },
    addActionDisabled: {
      type: Boolean,
      default: false
    },
    // 已产生费用的费用项
    feeTypeArr: {
      type: Array,
      default: () => []
    },
    // 是否为补充报价
    surcharge: {
      type: Boolean,
      default: false
    },
    waybillQuoteBargain: Boolean
  },
  data () {
    return {
      tableData: [],
      options: FEE_OPTIONS,
      feeTypes: []
    };
  },
  computed: {
    tableColumn () {
      return [
        {
          label: "费用项",
          name: "type",
          type: this.disabled ? "text" : "type"
        },
        {
          label: "费用",
          name: "money",
          type: this.disabled ? "text" : "input"
        },
        {
          label: "备注信息",
          name: "remarks",
          type: this.disabled ? "text" : "remarks"
        },
        {
          label: "补充费用",
          name: "money",
          type: "total"
        }
      ];
    }
  },
  watch: {
    dataList: {
      deep: true,
      handler (val) {
        this.tableData = JSON.parse(JSON.stringify(val));
      }
    },
    feeTypeArr: {
      deep: true,
      handler (val) {
        this.feeTypes = [...val];
      }
    }
  },
  methods: {
    thousandDigit (value, digit) {
      return returnThousandDigit(value, digit)
    },
    arraySpanMethod ({ row }) {
      if (row.title) {
        return [1, 4];
      }
    },
    // 新增费用
    addFee () {
      let flag = true; // true 可以新增 or false 不可新增
      if (this.tableData.length > 0) {
        this.tableData.map((item) => {
          if (!item.type && !item.title) {
            return (flag = false);
          }
        });
      }
      if (flag) {
        this.tableData.push({ add: true });
      } else {
        this.$message.warning("请选择费用项！");
      }
    },
    // 删除费用
    removeFee (index, row, name) {
      if (this.feeTypes.includes(row[name])) {
        this.feeTypes = this.feeTypes.filter(item => item != row[name]);
      }
      this.tableData.splice(index, 1);
      this.handleInput(row, name);
    },
    // 选择费用项
    handleSelect (index, row, name) {
      // this.feeTypes.push(val);
      this.feeTypes.splice(index, 1, row[name])
    },
    // 输入费用
    handleInput (value, name, type) {
      // 7位整数 2位小数
      let regStr = /^(-)?\d{0,7}(\.\d{0,2})?$/g;
      if (type === 'input') {
        value[name] = value[name] && value[name].replace(" ", '');
        if (name && !regStr.test(value[name])) {
          value[name] = null;
        }
      }

      let num = 0;
      this.tableData.map((item) => {
        num += Number(["-", ".", "-."].includes(item.money) ? 0 : item.money || 0);
      });
      this.$emit("onTotal", 2, Number(num).toFixed(2));
    }
  }
};
</script>
<style lang="scss" scoped>
.cost-title {
  margin: 20px 0 15px;
  span {
    color: var(--prev-border-color-grey);
    font-size: 12px;
  }
}
.icon-delete {
  color: var(--prev-icon-color-orange);
  cursor: pointer;
  margin-left: 5px;
  font-size: 16px;
}
.add-cost {
  border: 1px solid var(--prev-border-color-lighter);
  text-align: center;
  padding: 8px;
  font-size: 14px;
  color: var(--prev-color-text-primary);
  margin-top: -1px;
  height: 40px;
  line-height: 40px;
  span {
    cursor: pointer;
  }
  .icon {
    font-size: 20px;
  }
}
.c-red {
  color: var(--prev-color-text-purered);
}
.h24 {
  height: 24px;
}
.warn-style {
  border: 1px solid var(--prev-color-text-red);
  border-radius: 4px;
}
</style>
